<template>
    <div class="container">
        <h3 @click="handleLayers">图层管理</h3>
        <el-tree v-if="isLayers" style="max-width: 600px" :data="data" show-checkbox node-key="id"
            @check-change="handleCheckChange" :default-expanded-keys="[2, 3]" :default-checked-keys="[1]" />
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const isLayers = ref(false)
const children = ref([])
const data = ref([
    {
        id: 1,
        label: '地图文档',
        children: [
            {
                id: 2,
                label: '新地图',
                children: [
                ],
            },
        ],
    },
])

onMounted(() => {
    // 获取图层信息
    const docInfo = new Zondy.Catalog.MapDoc({
        docName: 'xzd-plus'
    })

    docInfo.getLayersInfo(data => {
        data.value.forEach(item => {
            var { GeomType, LayerIndex, Name } = item
            children.value.push({
                id: LayerIndex,
                label: Name,
                type: GeomType,
                checked: true
            })
        })
    })

    data.value[0].children[0].children = children.value
})
const handleLayers = () => {
    isLayers.value = !isLayers.value
}

const handleCheckChange = (evt) => {
    // 设置显隐
    console.log(evt.id)
    evt.checked = !evt.checked
    docLayer.setLayerStatus([evt.id], evt.checked ? 'include' : 'exclude')
}
</script>

<style scoped lang="scss">
.container {
    position: fixed;
    top: 20%;
    right: 5%;
    z-index: 1000;
    width: 200px;

    h3 {
        cursor: pointer;
    }
}
</style>
